<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过名称搜索人。。."
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="keywords">
          </el-input>
          <!--搜索-->
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
          </el-button>
          <!--添加用户-->
          <el-button type="primary" size="mini" icon="el-icon-plus"
                     @click="showAddUserView">
            添加用户
          </el-button>
        </div>
      </el-header>
      <!--用户列表-->
      <el-table
        :data="tableData"
        style="width: 100%">

        <el-table-column
          prop="date"
          label="日期"
          width="180">
          <!--          <template slot-scope="scope">{{ scope.row.date | formatDate}}</template>-->
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <!--操作-->
        <el-table-column
          fixed="right"
          label="操作"
          width="195">
          <template slot-scope="scope">
            <el-button @click="showEditEmpView(scope.row)" style="padding: 3px 4px 3px 4px;margin: 2px"
                       size="mini">编辑
            </el-button>
            <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="primary"
                       size="mini">查看高级资料
            </el-button>
            <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"
                       @click="deleteUser(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!--分页-->
        <el-pagination
          background
          :page-size="pagesize"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount">
        </el-pagination>
      </div>
    </el-container>
    <!--添加用户的模态框-->
    <el-form :model="user" :rules="rules" ref="addUserForm" style="margin: 0px;padding: 0px;">
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px;"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="77%">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="user.address"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-date-picker
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"
              suffix-icon="el-icon-date"
              v-model="user.date">
            </el-date-picker>
          </el-form-item>
          <el-button size="mini" @click="cancelEidt">取 消</el-button>
          <el-button size="mini" type="primary" @click="addUser('addUserForm')">确 定</el-button>
        </el-dialog>
      </div>
    </el-form>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        keywords: '',
        totalCount: -1,
        pagesize: 4,
        currentPage: 1,
        dialogVisible: false,
        dialogTitle: '',
        tableData: [],
        user: {
          name: '',
          address: '',
          date: ''
        },
        rules: {
          name: [{required: true, message: '必填:姓名', trigger: 'blur'}],
          address: [{required: true, message: '必填，地址', trigger: 'blur'}],
          date: [{required: true, message: '必填：出生日期', trigger: 'blur'}]
        }
      }
    },
    mounted: function () {
      this.initUser();
    },
    methods: {
      currentChange(currentChange) {
        this.currentPage = currentChange;
        this.initUser();
      },
      searchEmp() {
        this.initUser();
      },
      keywordsChange(val) {
        this.initUser();
      },
      showAddUserView() {
        this.dialogTitle = "添加用户";
        this.dialogVisible = true;
      },
      /*加载用户列表*/
      initUser() {
        var _this = this;
        // 表格加载动画
        this.tableLoading = true;
        this.getRequest("/user?page=" + this.currentPage + "&keywords=" + this.keywords + "&pageSize=" + this.pagesize).then(resp => {
          this.tableLoading = false;
          var data = resp.data;
          _this.tableData = data.user;
          _this.totalCount = data.count;
        })
      },
      cancelEidt() {
        this.dialogVisible = false;
        this.emptyUserData();
      },
      addUser(formName) {
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //修改
            if (this.user.id) {
              this.tableLoading = true;
              _this.tableLoading = false;
              this.putRequest("/updateUser", this.user).then(resp=> {
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  _this.dialogVisible = false;
                  _this.emptyUserData();
                  _this.initUser();
                }
              })
            }else {
              this.postRequest("/addUser", this.user).then(resp => {
                _this.tableLoading = false;
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  _this.dialogVisible = false;
                  _this.emptyUserData();
                  _this.initUser();
                }
              })
            }
          }
        })
      },
      emptyUserData() {
        this.user = {
          name: '',
          address: '',
          date: ''
        }
      },
      //删除用户时候提示用户是否删除
      deleteUser(row) {
        this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },
      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/delUser/" + ids).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.status, message: data.msg});
            _this.initUser();
          }
        })
      },
      showEditEmpView(row){
          this.dialogTitle="编辑员工";
          this.user = row;
          console.log(this.user)
         /* this.user.name=row.name;
          this.user.address=row.address;
          this.user.date=row.date;
          this.user.id=row.id;*/
          this.dialogVisible=true;
      }
    }
  }
</script>
